<template>
<div class="backstagemain">
    <h2 class="backstageheader">用户管理</h2>
    <div class="backstagesearch">
        <div class="backstageuserstatus">
            <label>状态:</label>
            <select v-model="stateSelected">
                <option value="正常">正常</option>
                <option value="封禁">封禁</option>
                <option value="注销">注销</option>
            </select>
        </div>
        <div class="backstageuserstatus">
            <label>性别:</label>
            <select v-model="sexSelected">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="backstagenamesearch">
            <label>用户名称:</label>
            <input v-model="user" type="text" autocomplete="off" placeholder="请输入用户名称">
        </div>
        <div class="backstageschoolsearch">
            <label>所属学校:</label>
            <input v-model="school" type="text" autocomplete="off" placeholder="请输入学校名称">
        </div>
        <div class="backstagebuttons">
            <button class="backstagesearchbtn" @click="conditionSearch()">搜索</button>
            <button class="backstagenewstart" @click="searchUsers(1)">重置</button>
        </div>
    </div>
    <div class="backstagecontrol"  v-show="ale ==0">
        <button type="button" class="backstagedeleteall" @click="deletechoose()">删除所选</button>
        <!-- <button type="button" class="add">新增</button> -->
    </div>
    <div class="backstagetablediv" v-show="message == 1">
        <table class="backstagetable" v-show="ale ==0">
          <thead>
            <tr>
              <th>选择</th>
              <th>状态</th>
              <th>用户头像</th>
              <th>用户姓名</th>
              <th>用户性别</th>
              <th>所属学校</th>
              <th>用户电话</th>
              <th>邮箱地址</th>
              <th>操作</th>
            </tr>
          </thead>
            <tbody ref="tbody">
                <UseradminItem       
                  v-for="(userObj,id) in users" 
                  :key="id"
                  :user="userObj"
                  :checkThis="checkThis"
                  v-show="ale == 0"
                  />
            </tbody>
            <!-- :checkThis="checkThis" -->
        </table>
        <el-alert
            title="请求失败了"
            type="error"
            :description="err"
            v-show="ale == 1"
            show-icon>
        </el-alert>
    </div>
    <div class="backstagetablediv" v-show="message == 0">
        <div class="sorry">
            很抱歉，没有找到符合条件的数据
        </div>
    </div>
    <DividePage :maxsize="5" v-show="message == 1 &&  ale ==0 " :changePage="changePage" :itemLength="userLength" :pagesizes="pagesizes"/>
</div>
</template>

<script>
import DividePage from '../DividePage.vue'
import UseradminItem from './UseradminItem.vue'
import axios from 'axios'
import {mapState} from 'vuex'
export default {
    name: 'Useradmin',
    components:{UseradminItem,DividePage},
    // props:['users'],
    data(){
        return{
            users:[],
            pagesizes:[5],
            stateSelected:'正常',
            sexSelected:'男',
            user:'',
            school:'',
            ids:[],
            idarr:'',
            userLength:0,
            message:1,
            config:{},
            ale:0,
            err:''
        }
    },
    computed: {
        ...mapState({
            dialog: state => state.dialog
        })
    },
    watch:{
        dialog(){
            this.searchUsers(1)
            this.$store.state.select = 1
        }
    },
    methods:{
        changePage(value){
            this.searchUsers(value)
        },
        searchUsers(pageNo){
            // 请求前更新list数据
            // let config = {
            //     headers: {
            //         'Content-Type': 'multipart/form-data',
            //         'contentType': "application/json",
            //         'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            //         'token':JSON.parse(sessionStorage.getItem("token")),
            //     },
            // }
            let token = JSON.parse(sessionStorage.getItem("token"))
            axios.get(`http://123.57.251.41:8080/admin-user/allUserInfo?pageNo=${pageNo}&pageSize=5`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('请求成功了')
                    console.log(response.data)
                    console.log(this.config)
                    this.userLength = response.data.data.total
                    this.users = response.data.data.list
                    // alert(response.data.data)
                    // console.log(header)
                    // if(response.data.data.list.length == 0){
                    //     this.message = 0
                    // }else{
                    //     this.message = 1
                    // }
                },
                error =>{
                    this.ale = 1;
                    this.err = error
                }
            )
            // axios({
            //     method:"get",
            //     url:`http://123.57.251.41:8080/admin-user/allUserInfo?pageNo=${pageNo}&pageSize=5`,
            //     headers: {
            //         'Authentication-Token':JSON.parse(sessionStorage.getItem("token"))
            //     },
            // })
            // .then(function(data){
            //     console.log("success============")
            //     console.log({data: data.data})
            // })
            // .catch((error) => {
            //     console.log(error)
            // })
        },
        deleteUser(){
            this.searchUsers(1)
        },
        conditionSearch(){
            if(this.user == ''){
                if(this.school == ''){
                    axios.get(`http://123.57.251.41:8080/admin-user/mcQuery?pageNo=1&pageSize=5&state=${this.stateSelected}&sex=${this.sexSelected}`,this.config).then(
                        response =>{
                            console.log('请求成功了')
                            console.log(response.data.data.list)
                            this.users = response.data.data.list
                            if(response.data.data.list.length == 0){
                                this.message = 0
                            }else{
                                this.message = 1
                            }
                        },
                        error =>{
                            this.ale = 1;
                            this.err = error
                        }
                    )
                }else{
                    axios.get(`http://123.57.251.41:8080/admin-user/mcQuery?pageNo=1&pageSize=5&&state=${this.stateSelected}&sex=${this.sexSelected}&school=${this.school}`,this.config).then(
                        response =>{
                            console.log('请求成功了')
                            console.log(response.data.data.list)
                            this.users = response.data.data.list
                            if(response.data.data.list.length == 0){
                                this.message = 0
                            }else{
                                this.message = 1
                            }
                        },
                        error =>{
                            this.ale = 1;
                            this.err = error
                        }
                    )
                }
            }else if(this.school == ''){
                axios.get(`http://123.57.251.41:8080/admin-user/mcQuery?pageNo=1&pageSize=5&user=${this.user}&state=${this.stateSelected}&sex=${this.sexSelected}`,this.config).then(
                    response =>{
                        console.log('请求成功了')
                        console.log(response.data.data.list)
                        this.users = response.data.data.list
                        if(response.data.data.list.length == 0){
                                this.message = 0
                        }else{
                                this.message = 1
                        }
                    },
                    error =>{
                        this.ale = 1;
                        this.err = error
                    }
                )
            }else{
                axios.get(`http://123.57.251.41:8080/admin-user/mcQuery?pageNo=1&pageSize=5&user=${this.user}&state=${this.stateSelected}&sex=${this.sexSelected}&school=${this.school}`,this.config).then(
                    response =>{
                        console.log('请求成功了')
                        console.log(response.data.data.list)
                        this.users = response.data.data.list
                        if(response.data.data.list.length == 0){
                                this.message = 0
                            }else{
                                this.message = 1
                            }
                    },
                    error =>{
                        this.ale = 1;
                        this.err = error
                    }
                )
            }
        },
        checkThis(a){
            if(this.ids.includes(a)){
                this.ids = this.ids.filter((id)=>{
                    if(id != a){
                        return id
                    }
                })
            }else{
                this.ids.unshift(a)
            }
        },
        deletechoose(){
            if(this.ids.length != 0){
                if(confirm('您确定要删除吗？')){
                    // ids.forEach(id => {
                    //     idarr += `&ids=${id}`
                    // });
                    console.log(this.ids)
                    axios.post(`http://123.57.251.41:8080/admin-user/batchRemoveUser?ids=${this.ids}`,this.config).then(
                        response =>{
                            console.log(response)
                            this.searchUsers(1)
                        },
                        error =>{
                            console.log(id)
                            alert("删除失败了",console.log(error))
                        }
                    )
                }
            }
        },
    },
    mounted(){
        this.config ={
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'contentType': "application/json",
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                    'token':JSON.parse(sessionStorage.getItem("token")),
                },
            }
        this.searchUsers(1)
    }
}
</script>

<style lang="less" scoped>
</style>